<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>同城活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <style>
        body{
            font-family: "Microsoft YaHei", sans-serif;
            min-height:100vh;
            background: #fff;
            padding-bottom: 50px;
            color: #333;
        }
        .header{
            background: #2a2c33;
        }
        .header h1{
            color:#fff;
            font-size:18px;
        }
        .header a{
            color:#fff;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .clear{
            clear: both;
            display:table;
        }
        ul li{
            list-style-type: none;
        }
        .section{
            margin-top:44px;
        }
        .intro .view{
            width:100%;
            position: relative;
        }
        .view img{
            width:100%;
            height:32vh;
        }
        .viewIntro{
            width:100%;
            height:60px;
            text-align: center;
            display: flex;
            display: -webkit-flex;
            justify-content:center;
            align-items:center;
        }

        .viewIntro>span{
            padding:20px 0;
            font-size: 15px;
            font-weight: bold;
            color: #43ac45;
        }
        .viewIntro span.title{
            max-width: 70vw;
        }
        .viewIntro span.titleImg{
            width:35px;
            height:8px;
            background: url("../../images/city/tp2.png") center no-repeat;
            background-size: contain;
        }
        .viewIntro>span:first-child{
            margin-right: 14px;
        }
        .viewIntro>span:last-child{
            margin-left:14px;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        /*点击弹出框*/
       .active{

       }
        .apply{
            width:100%;
            padding:0;
        }
        .apply ul{
            width:100%;
            margin:0;
            padding:5px 12px 0 12px;
        }
        .apply ul li{
            width:100%;
            padding:5px 0;
        }
        .apply ul li:last-child{
            padding-bottom: 20px;
        }
        .apply ul li>p{
            font-size: 14px;
            display: inline-block;
            margin:0;
            padding:0;
            color:#333;
            line-height:1.5;
            vertical-align: top;
        }
        .apply ul li>p:first-child{
            width:25%;
            text-align: justify;
        }
        .apply ul li>p:last-child{
            width:70%;
        }
        ul li .address:after{
            content: '';
            display: inline-block;
            width: 16px;
            height: 18px;
            margin-top:-10px;
            margin-left: 5px;
            vertical-align: -webkit-baseline-middle;
            background: url(../../images/icon/executive_housekeeper/dingw.png) center no-repeat ;
            background-size: 89%;
        }
        ul li .tell:after{
            content: '';
            display: inline-block;
            width: 16px;
            height: 18px;
            margin-top:-10px;
            margin-left: 5px;
            vertical-align: -webkit-baseline-middle;
            background: url(../../images/icon/executive_housekeeper/ip.png) center no-repeat ;
            background-size: 89%;
        }
        button.btn{
            width:100%;
            height:40px;
            font-size:15px;
            line-height: 40px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left:0;
            border:none;
            padding: 0;
            border-radius: 0;
        }
        .apply>p{
            background:#f2f2f2;
            height:30px;
            padding:0 12px;
            line-height:30px;

        }
        .review li img{
            width: 30px;
            height:30px;
            float: left;
            border-radius: 50%;
        }
        .review{
        	margin:0 0 40px 0;
        	padding:0;
        }
        .review li div{
            width:100%;
        }
        .review li div span{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
            color: #999;
            font-size:12px;
        }
        .review li p{
            font-size:13px;
            color:#333;
            margin-left:40px;
            word-wrap: break-word;
        }
        .review li{
            border-bottom:1px solid #f2f2f2;
            padding:5px 15px 0 15px;
            list-style-type: none;
            margin-bottom:0px;
        }
        /*活动简介*/
        .activeIntroTitle{
            border-top:5px solid #f2f2f2;
            text-align: center;
            width:100%;
            height:60px;
            background: url("../../images/city/tp1.png") center no-repeat;
            background-size: 55px 22px;
        }
        .activeIntroContent{
            padding:0 12px;
            width: calc(100% - 24px);
            font-size: 13px;
            color: #999;
            line-height: 2em;
            text-indent: 2em;
        }
        .foot{
            position: fixed;
            z-index: 10;
            right: 0;
            left: 0;
            bottom:0px;
            height: 44px;
            padding-right: 10px;
            padding-left: 10px;
            border-top:1px solid #f2f2f2;
            background: #fff;
        }
        .foot>div{
            background:#fff;
            box-shadow: 0 1px 6px #fff;
            border-bottom: 1px solid #f2f2f2;
        }
        .foot input{
            border: none;
            background: #f2f2f2;
            width: 75%;
            height: 33px;
            line-height:33px;
            font-size:13px;
            margin-top: 5px;
            margin-left: 10%;
            border-radius: 8px;
        }
        .foot div span{
            padding-left:2%;
            color:#999;
            font-size:14px;
        }
        
        
        /*btn样式*/
       .end_apply{
       		background: #d8d8d8;
       		color:#999;
       }
       .start_apply{
        	color:#fff;
        	background:#43ac45;
        }



       /*空格*/
        .nbsp{
            display: inline-block;
            width:1em;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">同城活动</h1>
</header>
<div class="section">
    <!--景点简介-->
    <!--<div class="intro">-->
        <!--<div class="view">-->
        <!--<img src="../../images/ce1.jpg" alt="">-->
    <!--</div>-->
        <!--<div class="viewIntro">-->
            <!--<span class="titleImg"></span><span class="title">五一相约深山沟农场</span><span class="titleImg"></span>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="apply">-->
        <!--<ul>-->
            <!--<li>-->
                <!--<p>活动类型：</p>-->
                <!--<p>亲子</p>-->
            <!--</li>-->
            <!--<li>-->
                <!--<p>活动人数：</p>-->
                <!--<p>50/100人</p>-->
            <!--</li>-->
            <!--<li>-->
                <!--<p>组织者<span class="nbsp"></span></span>：</p>-->
                <!--<p>深山沟家庭农场</p>-->
            <!--</li>-->
            <!--<li>-->
                <!--<p>预计费用：</p>-->
                <!--<p>成人150元，1.4以下儿童75元</p>-->
            <!--</li>-->
            <!--<li>-->
                <!--<p>活动时间：</p>-->
                <!--<p>2016年05月01日 08:30</p>-->
            <!--</li>-->
            <!--<li>-->
                <!--<p>结束时间：</p>-->
                <!--<p>2016年05月06日 15:30</p>-->
            <!--</li>-->
            <!--<li>-->
                <!--<p>联系电话：</p>-->
                <!--<p class="tell">0519-87932586</p>-->
            <!--</li>-->
            <!--<li>-->
                <!--<p>活动地点：</p>-->
                <!--<p class="address">常州市溧阳戴埠镇横涧南渚上曹村</p>-->
            <!--</li>-->
        <!--</ul>-->

        <!--<p>共10条评论</p>-->
    <!--</div>-->
    <!--<ul class="review">-->
		<!--<li>-->
			<!--<div class="clear">-->
				<!--<img src="../../images/ce2.jpg" alt="" />-->
				<!--<span class="left">时间</span>-->
				<!--<span class="right">2017-3-22</span>-->
			<!--</div>-->
			<!--<p>我去过，感觉风景很美</p>-->
		<!--</li>-->
    <!--</ul>-->

    <!--<div class="activeIntro">-->
        <!--<div class="activeIntroTitle">-->
        <!--</div>-->
        <!--<div class="activeIntroContent">-->
        <!--</div>-->
    <!--</div>-->
</div>
    <!--<button class="btn">活动报名</button>-->

    <!--<foot class="foot">-->
        <!--<div style="margin:0">-->
            <!--<div class="list-block">-->
                <!--<div style="height:50px;position:relative">-->
                    <!--<img src="../../images/icon/news_list/star.png" style="width:24px;position:absolute;top:7px;" id='setCollect' class="collection noStar">-->
                    <!--<img src="../../images/icon/news_list/start1.png" style="width:24px;position:absolute;top:7px;" id='cancelCollect' class="collection noStar">-->

                    <!--<input id="input" type="text" maxlength="140" placeholder="说说你的感想！140字之内">-->
                    <!--<span id="send">发送</span>-->
                <!--</div>-->
            <!--</div>-->
            <!--<p style='color:red;font-size:12px;text-align:center;margin-top: -11px;'>评论内容为140字以内！ </p>-->
        <!--</div>-->
    <!--</foot>-->
<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script src="../../plugins/template/template.js"></script>
<script type="text/html" id="contentTpl">
    <div class="intro">
        <div class="view">
            <img src="{{baseUrl}}{{data.front_cover}}" alt="">
        </div>
        <div class="viewIntro">
            <span class="titleImg"></span><span class="title">{{data.name}}</span><span class="titleImg"></span>
        </div>
    </div>
    <div class="apply">
	    <ul>
		    <li>
			    <p>活动类型：</p>
			    <p>{{data.tag_name}}</p>
		    </li>
		    <li>
			    <p>活动人数：</p>
			    <p>
			    	{{if data.status == 2}}
			    		{{data.enroll_number}}/  
			    	{{/if}}
			    	{{data.number}} 人
			    </p>
		    </li>
		    <li>
			    <p>组织者<span class="nbsp"></span>：</p>
			    <p>{{data.sponsor}}</p>
		    </li>
		    <li>
			    <p>预计费用：</p>
			    <p>{{data.cost}}</p>
		    </li>
		    <li>
			    <p>活动时间：</p>
			    <p>{{data.start_time}}</p>
		    </li>
		    <li>
			    <p>结束时间：</p>
			    <p>{{data.end_time}}</p>
		    </li>
		    <li>
			    <p>联系电话：</p>
			    <p class="tell" id="tel">{{data.telephone}}</p>
		    </li>
		    <li>
			    <p>活动地点：</p>
			    <p class="address" id="address">{{data.address}}</p>
		    </li>
	    </ul>
    </div>
    <div class="activeIntro">
        <div class="activeIntroTitle">
        </div>
        <div class="activeIntroContent">
            {{#data.content}}
        </div>
    </div>
    {{if data.status == 2}}
    	{{if data.is_end == 0}}
    		{{if data.is_enroll == 1}}
    		<button id=" {{tag_id}} " class="start_apply btn">已报名</button>
    		{{else}}
    		<button id=" {{tag_id}} " class="start_apply btn">活动报名</button>
    		{{/if}}
   	  	{{else if data.is_end == 1}}
   	  	<button id=" {{tag_id}} " class="start_apply btn">活动结束</button>
   	  	{{else if data.is_end == 2}}
   	  	<button id=" {{tag_id}} " class="start_apply btn">人数已满</button>
    	{{/if}}
    {{/if}}
</script>
<script>
    var pathImg;//图片
    var dataName;//名称
    mui.init();
    mui.plusReady(function(){
        var tag_id=plus.webview.currentWebview().pageid;
        var uid=plus.storage.getItem('cg_user_id');
        console.log(tag_id);
        console.log('//');
        //列表获取ajax
          myAjax('home/Activity/getActivity/','get',
              {
              	id:tag_id,
              	uid:uid
              },
            function(data) {
                console.log(data);
                if (data.success) {
                console.log(JSON.stringify(data));
                	var res = {
                		data:data,
                		baseUrl:_baseUrl
                	};
                	var contentHtml = template('contentTpl',res);

                    dataName=data.name;
                    pathImg=_baseUrl+data.front_cover;
                $('.section').html(contentHtml);
                //btn的颜色状态判断
                console.log();
                if ($('button').html() != '活动报名') {
                    $('button').addClass('end_apply').removeClass('start_apply');
                } else {
                    $('button').addClass('start_apply').removeClass('end_apply');
                }

				$('.section .view').find('img').each(function(){
                    if($(this).attr('src') ==''){
                        $(this).css('display','none');
                    }else{
                    	$(this).css({
							'width': '100%',
							'height': 'auto'
						});
                    }
                });
                $('.section .activeIntro').find('img').each(function(){
                    if($(this).attr('src') ==''){
                        $(this).css('display','none');
                    }else{
                    	$(this).parent().css({
                    		'width': 'calc(100% - 24px)',
							'height': 'auto'
                    	})
                    	$(this).css({
							'width': '100%',
							'height': 'auto'
						});
                    }
                });
                //报名条件：
              if(data.is_end==0 && data.is_enroll==0){        
                    //点击去报名
                    mui('.section').on('tap', ' .start_apply', function (e) {
                        console.log('跳转下一页：报名信息填写')
                        var this_id = $(this).attr('id');
                        //获取页面的id

                        console.log(this_id);
                        console.log('id是多少')
                        mui.openWindow({
                            url: 'apply_index.html',
                            id:'apply_index',
                            extras: {
                                'this_id': this_id,
                                'path':pathImg,
                                'name':dataName
                            },
                            waiting: {
                                autoShow: true,//自动显示等待框，默认为true
                                title: '正在加载...',//等待对话框上显示的提示内容
                            },
                            show: {
                                autoShow: true,
                                aniShow: 'fade-in'
                            },
                        })
                    })
                }
            }
		      //结束ajax  
 			 }
          )
		//查看景区详情简介
        mui('.section').on('tap','.intro .viewIntro span',function(e){
        	console.log('/////')
        	if($('.viewIntro span').attr('class')=='active'){
            	$('.viewIntro>p').css({
	            	' display':'-webkit-box',
	           		'-webkit-line-clamp':'2'
            	});
        		$('.viewIntro span').removeClass('active').addClass('noactive');
        	}else{
            	$('.viewIntro>p').css({
	            	' display':'block',
	           		'-webkit-line-clamp':'100'
            	});
           		 $('.viewIntro span').removeClass('noactive').addClass('active');
        	}
        })
        //点击去报名
//      mui('.section').on('tap',' .apply #btn',function(){
//          mui.openWindow({
//              url:'apply_index.html',
//              id:'apply_index',
//              waiting:{
//				    autoShow:true,//自动显示等待框，默认为true
//				   	title:'正在加载...',//等待对话框上显示的提示内容
//    			},
//    			show:{
//    				autoShow:true,
//    				aniShow:'fade-in'
//    			},
//    			extras:{
//    				type:0
//    			}
//          })
//      })
        //地址map地图
        $('body').delegate('#address', 'touchstart', function(e) {
			var address = $('.address').text();
			mui.openWindow({
				url:'../executive_housekeeper/map.html',
				extras:{
					'address':address
				},
				waiting:{
					autoShow:true,//自动显示等待框，默认为true
	  				title:'正在加载...',//等待对话框上显示的提示内容
				}
			})
			e.preventDefault();
		});
        
        
        
        
        $('body').delegate('#tel', 'tap', function(e) {
			var telephone = $('.tell').text();
			mui.confirm(telephone, '提示', ['取消', '拨打'], function(value) {
				if(value.index == 1) {
					var Uri = plus.android.importClass("android.net.Uri");
					var Intent = plus.android.importClass("android.content.Intent");
					var number = new Uri.parse("tel:"+telephone);
					var callIntent = new Intent(Intent.ACTION_CALL, number); 
					plus.android.runtimeMainActivity().startActivity(callIntent);
				}
			});
			e.preventDefault();
		});
        
        
        //拨打电话
        
    })
</script>
</body>
</html>
